<template>
  <div class="easy-container flex" style="padding-top: .65rem; padding-bottom: .65rem;">
    <div class="shrink-0" style="padding-top: 3px;">
      <svg-icon :icon-name="stateIcon.icon" :style="`color: ${stateIcon.color};`" class="s18" />
    </div>
    <div class="cell flex-1">
      <div>
        <el-tag v-if="issue.good" type="danger" size="mini" class="m-r-5">精</el-tag>
        <router-link
          :to="`/spaces/${issue.space.id}/issues/${issue.id}`"
          class="title link hover-underline f-16"
          :class="{ 'good-resource-text': issue.good }"
        >{{ issue.title }}</router-link>
        <el-tag v-for="tag in issue.tags" :key="tag" size="mini">{{ tag }}</el-tag>
      </div>
      <div class="flex align-items-center" style="margin-top: 6px;">
        <router-link
          :to="`/users/${issue.author.id}`"
          class="link flex align-items-center info-deep"
          target="_blank"
        >
          <el-avatar :src="issue.author.avatar" class="s20 m-r-5" />
          {{ issue.author.nickname }}
        </router-link>
        <timeago2 :date-time="issue.created_at" pre-text=" - 创建于" class="info m-l-5" />
      </div>
    </div>
    <div class="cell shrink-0 text-right">
      <list-item-icons :issue="issue" class="f-15" />
      <div style="margin-top: 6px; line-height: 22px;">
        <timeago2 :date-time="issue.updated_at" pre-text="更新于" class="info" />
      </div>
    </div>
  </div>
</template>

<script>
import ListItemIcons from './list-item-icons';

export default {
  name: 'issues-list-item',
  components: { ListItemIcons },
  props: {
    issue: Object,
  },
  computed: {
    stateIcon() {
      if (this.issue.solved) return { icon: 'issue-solved', color: '#67c23a' };
      return { icon: 'issue-open', color: '#e6a23c' };
    },
  },
};
</script>

<style></style>
